<template>
  <div class="li-acc-input">
    <div class="line-row">
      <span class="title">{{mType}}</span>
      <input
        type="text"
        ref="infocus"
        v-model="transferNum"
        maxlength="16"
        autofocus="autofocus"
        @blur.prevent="onblur"
        @focus="onFocus"
      />
      <div v-if="transferNum ? true : false" @click="resetInput">
        <i class="ic_closes"></i>
      </div>
      <el-button style="padding: 8px 6px" type="danger" @click="transferAll">全额转入</el-button>
    </div>
    <div class="capital-num">
      <span class="ctextw">{{textw}}</span>
      <span class="ctextm">{{textm}}</span>
    </div>
  </div>
</template>

<script>
// import {ToolEasy} from '../public/javascripts/index'
import ToolEasy from '../public/javascripts/ToolEasy'
export default {
  name: "li-acc-input",
  data() {
    return {
      transferNum: "",
      clickReset: false,
      textw: "",
      textm: ""
    };
  },
  watch: {
    transferNum(nInput, oInput) {
       this.callbackInput(nInput)
      if (nInput.indexOf(",") > 0) {
        // 失去焦点时触发，如果是金额格式显示，则不在进行toMoneyNum处理
        return;
      }
      // 输入框下，繁体金额匹配展示逻辑
      let thisRef = this;
      ToolEasy.capitalAcc(nInput, function (prew, postw) {
        if(!prew && !postw){
          thisRef.textw = '';
          thisRef.textm = '';
          return;
        }
        if(!postw){
          thisRef.textm = prew;
        }else {
          thisRef.textw = prew;
          thisRef.textm = postw;
        }
      })
    }
  },
  methods: {
    transferAll() {
      this.clickReset = true
      this.transferNum = "100";
    },
    onblur() {
      let thisRef = this;
     
      setTimeout(function(){
         if(thisRef.clickReset) {
          // 如果点击清除，执行拦截
          thisRef.clickReset = false
          return;
      }
        thisRef.clickReset = false;
        // 输入的数字到金额的转换
        ToolEasy.toMoneyNum(thisRef.transferNum, function(tNum){
            thisRef.transferNum = tNum
        })
      }, 222)
    },
    onFocus() {
      let thisRef = this;
      //如果是金额展示，获取焦点处理输入框置空
      if (thisRef.transferNum.indexOf(',') > 0) {
        thisRef.transferNum = ''
        this.$refs.infocus.focus()
      }
    },
    resetInput() {
      this.clickReset = true;
      this.transferNum = "";
      this.$refs.infocus.focus();
    }
  },
  props: {
    allBalance: {
      type: String,
      default: "0.00",
    },
    mType: {
      type: String,
      default: "转账金额",
    },
    callbackInput: {
      type: Function
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
body {
  padding: 0 0;
  margin: 0 0;
}
.li-acc-input {
  background-color: white;
  display: block;
  border-top: 1px #e3e3e4 solid;
  padding: 0 16px;
  white-space: nowrap;
  overflow: hidden;
}

span {
  font-size: 14px;
  color: #333;
  .title {
    flex: 1;
  }
}
input {
  border: 1px solid transparent;
  outline: none;
  text-align: right;
  flex: 4;
}
.line-row {
  background-color: white;
  display: flex;
  height: 46px;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 0 0;
}
el-button {
  flex: 1;
}
.ic_closes {
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url("../public/images/ic_close.png") no-repeat;
  background-size: 15px 15px;
  margin: 0 4px;
  flex: 1;
}
.capital-num {
  position: relative;
  right: 100px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-end;
  background: white;
  padding: 0 0;
  margin: 0 0;
  .ctextw {
    color: red;
    text-align: right;
  }
  .ctextm {
    color: #333;
    text-align: right;
  }
}
.el-button--danger {
  color: #fff;
  background-color: #ee827f;
  border-color: #ee827f;
  span {
    letter-spacing: 0.2em;
    margin-left: 4px;
  }
}
</style>
